Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@depay/react-dialog
Advanced tools
yarn add @depay/react-dialog
or
npm install --save @depay/react-dialog
import { ReactDialog } from '@depay/react-dialog'
/*...*/
close() {
if(this.state == something) {
this.setState({ showDialog: false })
}
}
/*...*/
<ReactDialog close={this.close} open={this.state.showDialog}>
<div className="ReactDialogAnimation MyDialogStyle">
<h1>I am a dialog</h1>
<button onclick={this.close}>Close Dialog</button>
</div>
</ReactDialog>
https://depayfi.github.io/react-dialog/dev.html
import { ReactDialog } from '@depay/react-dialog'
render() {
return(
...
<ReactDialog close={this.close} open={this.state.showDialog}>
<div className="ReactDialogAnimation MyDialogStyle">
<h1>I am a dialog</h1>
<button onclick={this.close}>Close Dialog</button>
</div>
</ReactDialog>
)
}
Please apply the ReactDialogAnimation
class to the child element that you want to be animated as part of the dialog opening animation.
close (function)
: A function living in the dialog parent that is called from the ReactDialog on a close attempt. The parent has to take care if a dialog is closable, and needs to set it's own state accordingly.
close() {
if(this.state == something) {
this.setState({ showDialog: false })
}
}
/*...*/
<ReactDialog close={this.close} open={this.state.showDialog}>
<h1>I am a dialog</h1>
<button onclick={this.close}>Close Dialog</button>
</ReactDialog>
background (string)
: Background passed as CSS to the ReactDialogBackground
.
<ReactDialog background={'rgba(255,255,255,0.6)'} close={this.close} open={this.state.showDialog}>
<h1>I am a dialog with white background.</h1>
</ReactDialog>
document (Document)
: Allows to forward a different document where the dialog is supposed to live in.
<ReactDialog document={someIframe.document}>
<h1>I am a dialog</h1>
<button onclick={this.close}>Close Dialog</button>
</ReactDialog>
container (HTMLElement)
: Allows to provide a explicit container where the dialog is supposed to be rendered into.
<ReactDialog container={document.getElementById('app')}>
<h1>I am a dialog</h1>
<button onclick={this.close}>Close Dialog</button>
</ReactDialog>
yarn install
yarn start
Starts cypress in --headed
and --no-exit
test:cypress:debug
Test and debug single cypress file:
yarn test:cypress:debug --spec "cypress/integration/close.js"
npm publish
FAQs
A basic dialog component for react.
The npm package @depay/react-dialog receives a total of 184 weekly downloads. As such, @depay/react-dialog popularity was classified as not popular.
We found that @depay/react-dialog demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.